{% extends 'base.html' %} {% load staticfiles %} {% block title %}IP地址详细{% endblock %} {% block css %}

<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> {% endblock %} {% block content %}

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
        IP地址详细
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li>IP地址管理</li>
    <li class="active">地址详细</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <!-- Default box -->
  <div class="box">
    <div class="box-body">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
          <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">更新日志</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab_1">
              <div class="row">
                <div class="col-xs-2 text-right">IP:</div>
                <div class="col-xs-4">{{ ipaddress.name }}</div>
                <div class="col-xs-2 text-right">网关:</div>
                <div class="col-xs-4">{{ ipaddress.ipnet.gw_ip }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">运营商:</div>
                <div class="col-xs-4">{{ ipaddress.ipnet.isp }}</div>
                <div class="col-xs-2 text-right">状态:</div>
                <div class="col-xs-4">{{ ipaddress.get_ipaddress_status_display }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">客户名称:</div>
                <div class="col-xs-4">{{ ipaddress.ipaddress_customer }}</div>
                <div class="col-xs-2 text-right">分配设备:</div>
                <div class="col-xs-4">
                      {% if ipaddress.asset.asset_type == 'server' %}
                      <a href="{% url 'serverdetail' ipaddress.asset.id %}" target=_blank>
                      {% elif ipaddress.asset.asset_type == 'networkdevice' %}
                      <a href="{% url 'networkdevicedetail' ipaddress.asset.id %}" target=_blank>
                      {% endif %} 
                      {{ ipaddress.asset|default:'' }}</a></div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">所属网段:</div>
                <div class="col-xs-4"><a href="{% url 'ipnetdetail' ipaddress.ipnet.id %}" target=_blank>{{ ipaddress.ipnet }}</a></div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">备注:</div>
                <div class="col-xs-4">{{ ipaddress.memo }}</div>
              </div>
              <br>          
            <p style=" margin:0 auto; text-align:center;">
            <button class="btn btn-default " align="center" data-toggle="modal" data-target="#ipaddresseditModal">修改</button> 
            </p>
            <br>
            <form class="form-inline content_size" action="{% url 'ipaddressdetail' ipaddress.id %}" method="post">
              {% csrf_token %}
              <div class="modal fade" id='ipaddresseditModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">IP地址信息修改</h4>
                    </div>
                    <div class="modal-body">
                      <div class="form-group">
                        <label for="modify">IP</label>
                        <input type="text" class="form-control" type="text" value= {{ ipaddress.name }} readonly name='name'>
                        <label for="modify">分配设备</label>
                        <input type="text" class="form-control" name='asset' value= {{ ipaddress.asset|default:'' }}>
                      </div>
                      <div class="form-group">
                        <label for="modify">状态</label>
                        <select class="form-control" name='ipaddress_status'>
                            <option value='0' {% if ipaddress.ipaddress_status == 0 %} selected="selected" {% endif %}>运营</option>
                            <option value='1' {% if ipaddress.ipaddress_status == 1 %} selected="selected" {% endif %}>待分配</option>
                            <option value='2' {% if ipaddress.ipaddress_status == 2 %} selected="selected" {% endif %}>已分配</option>
                            <option value='3' {% if ipaddress.ipaddress_status == 3 %} selected="selected" {% endif %}>保留</option>
                            </select>
                      </div>
                      <div class="form-group">
                        <label for="modify">客户名称</label>
                        <input type="text" class="form-control" name='ipaddress_customer' value= {{ ipaddress.ipaddress_customer }}>
                        <label for="modify">备注</label>
                        <input type="text" class="form-control" name='memo' value= {{ ipaddress.memo }}>
                      </div>
                      <div class="form-group">
                        <label for="modify">修改原因<font color='#ff0000'>*</font></label>
                        <input type="text" class="form-control" name='reason' required>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" name="submit" value="ipaddress_edit" class="btn btn-primary">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <!-- /.tab-pane tab_1 -->
          <div class="tab-pane" id="tab_2">
          <h4><b>{{ asset.name }} 日志信息:</b></h4>
          <table id="ipeventlog_table" border="1" class="display table table-bordered table-striped">
            <thead>
              <tr>
                  <th>类型</th>
                  <th>详细内容</th>
                  <th>操作原因</th>
                  <th>操作时间</th>
                  <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              {% for log in ipeventlog %}
              <tr>
                <td id="log_event_type">{{ log.get_event_type_display }}</td>
                <td id="log_detail">{{ log.detail }}</td>
                <td id="log_reason">{{ log.reason }}</td>
                <td id="log_date">{{ log.date|date:"Y-m-d  H:i:s" }}</td>
                <td id="log_user">{{ log.user }}</td>
              </tr>
              {% empty %}
              <tr>没有日志信息！</tr>
              {% endfor %}
            </tbody>
          </table>
          </div>
          <!-- /.tab-pane tab_2 -->
        </div>
      </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      <i class="fa fa-angle-double-left"></i>&nbsp;&nbsp;<a href="{% url 'index' %}"><strong>返回资产列表页</strong></a>
    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->
{% endblock %} {% block script %}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
<!-- page script -->
<script>
  $(document).ready(function() {
    $('#ipeventlog_table').DataTable({
      "order": [
        [3, "desc"]
      ]
    });
  });
</script>
{% endblock %}
